<template>
  <Card>
    <p slot="title">调度管理</p>
    <Form class="search-form" :model="formItem" :label-width="80">
      <FormItem label="名称:">
        <Input v-model="formItem.input" clearable placeholder="名称" style="width: auto;"></Input>
      </FormItem>
      <FormItem label="分组名:">
        <Input v-model="formItem.input" clearable placeholder="分组名" style="width: auto;"></Input>
      </FormItem>
      <FormItem label="状态:">
        <!--job状态，0：已删除，1：启用状态，2：暂停状态，3：停止状态-->
        <Select v-model="formItem.select" style="width: auto;">
          <Option value="1">已启用</Option>
          <Option value="2">已暂停</Option>
          <Option value="3">已停止</Option>
          <Option value="0">已删除</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" icon="ios-search" style="margin-right: 5px;">搜索</Button>
        <Button type="primary" icon="ios-add" @click="addForm.modal = true">增加</Button>
      </FormItem>
    </Form>
    <Table height="520" border :columns="columns12" :data="data6" :loading="false" tooltip-theme="dark">
      <template slot-scope="{ row }" slot="status">
        <!--job状态，0：已删除，1：启用状态，2：暂停状态，3：停止状态-->
        <span v-if="row.status===1" style="color: #19be6b"><Icon style="position: relative;top: -2px;" type="ios-play"
                                                                 color="#19be6b"/>已启用</span>
        <span v-if="row.status===2" style="color: #ffa600"><Icon style="position: relative;top: -2px;"
                                                                 type="ios-pause"
                                                                 color="#ffa600"/>已暂停</span>
        <span v-if="row.status===3" style="color: #ff7500"><Icon style="position: relative;top: -1px;"
                                                                 type="ios-square"
                                                                 color="#ff7500"/>已停止</span>
        <span v-if="row.status===0" style="color: #ed4014"><Icon style="position: relative;top: -2px;"
                                                                 type="ios-close"
                                                                 color="#ed4014"/>已删除</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button v-if="row.status===1" type="warning" icon="ios-pause" size="small" style="margin-right: 5px"
                @click="pauseJob(index)">暂停
        </Button>
        <Button v-if="row.status===2" type="success" icon="ios-redo" size="small" style="margin-right: 5px"
                @click="resumeJob(index)">恢复
        </Button>
        <Button type="error" icon="ios-close" size="small" @click="confirm(index)">移除</Button>
      </template>
    </Table>
    <Page :total="100" show-sizer />

    <template>
      <Modal
        title="添加HTTP任务"
        v-model="addForm.modal"
        :closable="false"
        :mask-closable="false"
        class-name="vertical-center-modal">
        <Form ref="addForm" :model="addForm" :rules="addFormRuleValidate" :label-width="80">
          <FormItem label="名称:" prop="name">
            <Input v-model="addForm.name" placeholder="Job名称..."></Input>
          </FormItem>
          <FormItem label="分组名:" prop="group">
            <Input v-model="addForm.group" placeholder="Job分组名..."></Input>
          </FormItem>
          <FormItem label="Cron:" prop="cron">
            <Input v-model="addForm.cron" placeholder="Cron..."></Input>
          </FormItem>
          <FormItem label="请求:" prop="url_view">
            <Input v-model="addForm.url_view" placeholder="www.example.com">
              <Select v-model="addForm.method" slot="prepend" style="width: 80px">
                <Option value="GET">GET</Option>
                <Option value="POST">POST</Option>
                <Option value="PUT">PUT</Option>
                <Option value="DELETE">DELETE</Option>
              </Select>
              <Select v-model="addForm.pact" slot="prepend" style="width: 80px">
                <Option value="http://">http://</Option>
                <Option value="https://">https://</Option>
              </Select>
            </Input>
          </FormItem>
          <FormItem label="调用微服务:">
            <i-switch v-model="addForm.service">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
            <span> 普通的http请求请选择 <strong>否</strong></span>
          </FormItem>
          <FormItem label="JSON参数:">
            <Input v-model="addForm.param_view" type="textarea" :rows="4" placeholder="json对象/数组字符串"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="cancel('addForm')">取消</Button>
          <Button type="primary" :loading="addForm.loading" @click="asyncOK('addForm')">确定</Button>
        </div>
      </Modal>
    </template>
  </Card>
</template>
<script>
export default {
  name: 'article_list',
  data () {
    return {
      addForm: {
        modal: false,
        loading: false,
        name: '',
        group: '',
        cron: '',
        method: 'GET',
        pact: 'http://',
        url: '',
        url_view: '',
        param: '',
        param_view: ''
      },
      addFormRuleValidate: {
        name: [
          { required: true, message: '请输入job名称', trigger: 'blur' }
        ],
        group: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ],
        cron: [
          { required: true, message: '请输入cron表达式', trigger: 'blur' }
        ],
        url_view: [
          { required: true, message: '请输入请求url', trigger: 'blur' }
        ]
      },
      columns12: [
        {
          type: 'index',
          width: 50,
          align: 'center'
        },
        {
          title: 'job名称',
          key: 'name',
          minWidth: 110,
          ellipsis: true,
          tooltip: true
        },
        {
          title: 'job分组名',
          key: 'group',
          minWidth: 110,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '运行表达式',
          key: 'cron',
          minWidth: 120,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '状态',
          slot: 'status',
          minWidth: 85,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '已运行次数',
          key: 'executeNum',
          minWidth: 55,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '下次执行时间',
          key: 'nextFireTime',
          minWidth: 120,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'left',
          fixed: 'right'
        }
      ],
      data6: [
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 1,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 2,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 3,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        },
        {
          name: 'job测试',
          group: '分组测试',
          cron: '0 5 1 * * ? *',
          status: 0,
          executeNum: 13,
          nextFireTime: '2019-09-06 18:32:05'
        }
      ],
      formItem: {
        input: '',
        select: '1',
        select1: 'http://',
        radio: 'male',
        checkbox: [],
        switch: true,
        date: '',
        time: '',
        slider: [20, 50],
        textarea: ''
      }
    }
  },
  methods: {
    cancel (name) {
      this.addForm.modal = false
      this.$refs['addForm'].resetFields()
    },
    asyncOK (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.addForm.param_view) {
            try {
              JSON.parse(this.addForm.param_view)
              this.addForm.param = JSON.stringify(JSON.parse(this.addForm.param_view))
            } catch (e) {
              this.$Message.error('请填写正确的json字符串')
              return false
            }
          } else {
            this.addForm.param = '{}'
          }
          this.addForm.url = this.addForm.pact + this.addForm.url_view
          console.log(this.addForm)
        } else {
          this.$Message.error('请填写必要信息')
        }
      })
    },
    show (index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
      })
    },
    remove (index) {
      this.data6.splice(index, 1)
    },
    confirm (index) {
      this.$Modal.confirm({
        title: '警告',
        content: '<p>确定删除此任务吗？</p>',
        onOk: () => {

        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    pauseJob (index) {
      this.$Modal.confirm({
        title: '警告',
        content: '<p>确定暂停此任务吗？</p>',
        onOk: () => {

        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    resumeJob (index) {
      this.$Modal.confirm({
        title: '警告',
        content: '<p>确定恢复此任务吗？</p>',
        onOk: () => {

        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    addJob () {

    }
  }
}
</script>
<style lang="less">
  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }

  .search-form .ivu-form-item {
    display: inline-block !important;
  }

  .ivu-tooltip-inner {
    max-width: max-content !important;
  }
</style>
